<template>
  <div class="quick-attendance">
    <div class="page-header">
      <i class="el-icon-magic-stick"></i>
      创建一键签到
      <div class="header-desc">快速创建签到任务，无需学生操作即可完成签到</div>
    </div>
    <el-form :model="form" :rules="rules" ref="form" label-width="120px" class="attendance-form">
      <el-form-item label="签到标题" prop="title" required>
        <el-input
          v-model="form.title"
          placeholder="请输入签到标题，如：第1节课签到">
        </el-input>
      </el-form-item>
      <el-form-item label="选择班级" prop="classroomId" required>
        <el-select
          v-model="form.classroomId"
          placeholder="请选择班级"
          style="width: 100%">
          <el-option
            v-for="item in classrooms"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间" prop="startTime" required>
        <el-date-picker
          v-model="form.startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="endTime" required>
        <el-date-picker
          v-model="form.endTime"
          type="datetime"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          style="width: 100%">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSubmit" :loading="loading">创建签到</el-button>
      </el-form-item>
    </el-form>

    <!-- 成功提示对话框 -->
    <el-dialog
      title="签到创建成功"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <div class="success-container">
        <i class="el-icon-success success-icon"></i>
        <p class="success-message">一键签到任务已创建成功</p>
        <p class="time-info">
          开始时间：{{ form.startTime }}<br>
          结束时间：{{ form.endTime }}
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'QuickAttendance',
  data() {
    return {
      form: {
        title: '',
        classroomId: '',
        startTime: '',
        endTime: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入签到标题', trigger: 'blur' },
          { min: 2, max: 50, message: '标题长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        classroomId: [
          { required: true, message: '请选择班级', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择结束时间', trigger: 'change' }
        ]
      },
      classrooms: [],
      loading: false,
      dialogVisible: false
    }
  },
  created() {
    this.getClassrooms()
  },
  methods: {
    async getClassrooms() {
      try {
        const res = await this.$http.get('/api/teacher/classroom/list')
        this.classrooms = res.data.records
      } catch (error) {
        this.$message.error('获取班级列表失败')
      }
    },
    async handleSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          this.loading = true
          let res
          try {
            res = await this.$http.post('/api/teacher/attendance/quick', this.form)
            if (res.code === 1) {
              this.$message.success('创建签到成功')
              this.dialogVisible = true
            } else {
              this.$message.error(res.msg)
            }
          } catch (error) {
            if (error.response && error.response.data) {
              this.$message.error(error.response.data.msg)
            } else {
              this.$message.error('创建签到失败')
            }
          } finally {
            this.loading = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.quick-attendance {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: bold;
}

.header-desc {
  font-size: 14px;
  color: #666;
  margin-top: 5px;
  font-weight: normal;
}

.attendance-form {
  max-width: 600px;
  margin: 0 auto;
}

.success-container {
  text-align: center;
  padding: 20px;
}

.success-icon {
  font-size: 48px;
  color: #67C23A;
  margin-bottom: 20px;
}

.success-message {
  font-size: 18px;
  color: #67C23A;
  margin-bottom: 20px;
}

.time-info {
  color: #666;
  margin-top: 20px;
  line-height: 1.5;
}
</style>
